<template>
  <view class="latest-trade-container">
    <ex-table v-if="!isEmpty">
      <ex-tr>
        <ex-th>{{ $t("latestTrade.label[0]") }}</ex-th>
        <ex-th>{{ $t("latestTrade.label[1]") }}</ex-th>
        <ex-th>{{
          $t("latestTrade.label[2]").replace("{currency}", systemCurrency)
        }}</ex-th>
        <ex-th>{{ $t("latestTrade.label[3]") }}</ex-th>
      </ex-tr>
      <ex-tr v-for="(item, index) in list" :key="index">
        <ex-td style="color: #8e8d92">{{ formatTime(item.timestamp) }}</ex-td>
        <!-- 1是买, 2是卖 -->
        <ex-td :class="getTypeStatus(item.way).color">{{
          getTypeStatus(item.way).name
        }}</ex-td>
        <ex-td>{{ formatPrice(item.price) }}</ex-td>
        <ex-td style="color: #8e8d92">{{ $utils.fixed(item.amount, 6) }}</ex-td>
      </ex-tr>
    </ex-table>
    <view class="latest-trade-empty-wrap" v-else>
      <ex-empty></ex-empty>
    </view>
  </view>
</template>

<script>
import ExTable from "@/components/ExTables/ExTable";
import ExTr from "@/components/ExTables/ExTr";
import ExTd from "@/components/ExTables/ExTd";
import ExTh from "@/components/ExTables/ExTh";
import tradeMixin from "@/pages/trade/trade.js";
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    symbol: {
      type: String,
      default: "",
    },
  },
  components: {
    ExTable,
    ExTr,
    ExTd,
    ExTh,
  },
  name: "LatestTrade",
  data() {
    return {};
  },
  computed: {
    isEmpty() {
      return this.$u.test.isEmpty(this.list);
    },
  },
  methods: {
    formatPrice(price) {
      return this.$utils.priceToFixed(price);
    },
    getTypeStatus(way) {
      if (way == 1) {
        return {
          name: this.$t("user.order.buy"),
          color: "green",
        };
      } else if (way == 2) {
        return {
          name: this.$t("user.order.sell"),
          color: "red",
        };
      }
      return {};
    },
    formatTime(t) {
      if ((''+t).length === 10) {
        t = t * 1000;
      }
      // return this.$dayjs(t).format("HH:mm:ss");
      return this.formatDateTo(t,"HH:mm:ss")
    },
  },
};
</script>

<style lang="less" scoped>
.latest-trade-container {
  position: sticky;
  top: 88rpx;
  z-index: 198;
  font-size: 24rpx;
  font-weight: bold;
  .green {
    color: var(--up-color);
  }
  .red {
    color: var(--down-color);
  }
}

.latest-trade-empty-wrap {
  height: 400rpx;
  background-color: @white;
}
</style>
